import {Component, provide, forwardRef, OpaqueToken, Injector} from "angular2/core";

export const ModalServiceTocken = new OpaqueToken('ModalServiceTocken');

/**
 * ModalComponent
 */
@Component({
	selector: "modal-cmp",
	template: `
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="testClick()"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              <div><ng-content></ng-content></div>
              <div>{{content}}</div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" (click)="testClick()">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
	`,
  providers: [provide(ModalServiceTocken, {useExisting: ModalComponent})]
})
export class ModalComponent {
  content = "";
  
	constructor(private injector: Injector) {}
	
	showModal(content: any) {
    var mySelf = this.injector.get(ModalServiceTocken);
    
    this.content = content;
		$('#myModal').modal('show');
	}
  
  testClick() {
    // console.log("-----testClick");
  }
}